<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Multi Step Registration Form Template</title>

    <!-- CSS -->
    <link rel="stylesheet" href="/fallwings/static/common/css/bootstrap.min.css">
    <link rel="stylesheet" href="/fallwings/static/common/css/font-awesome.min.css">
    <link rel="stylesheet" href="/fallwings/static/register/css/form-elements.css">
    <link rel="stylesheet" href="/fallwings/static/register/css/style.css">

    <!-- Favicon and touch icons -->
    <!--<link rel="shortcut icon" href="assets/ico/favicon.png">-->
    <!--<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">-->
    <!--<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">-->
    <!--<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">-->
    <!--<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">-->

</head>

<body>

<!-- Top menu -->
<nav class="navbar navbar-inverse navbar-no-bg" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand"></div>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="top-navbar-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
							<span class="li-text">
								Put some text or
							</span>
                    <a href="#"><strong>links</strong></a>
							<span class="li-text">
								here, or some icons: 
							</span> 
							<span class="li-social">
								<a href="#"><i class="fa fa-facebook"></i></a> 
								<a href="#"><i class="fa fa-twitter"></i></a> 
								<a href="#"><i class="fa fa-envelope"></i></a> 
								<a href="#"><i class="fa fa-skype"></i></a>
							</span>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Top content -->
<div class="top-content">

    <div class="inner-bg">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-sm-offset-2 text">
                    <h1>Sign Up And Join Us !</h1>

                    <div class="description">
                        <p>
                            This is a free video website based on LAN, you don't have to worry about traffic,
                            come and join us to explore amazing video tour!
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 form-box">

                    <form role="form" id="userInfo_register_form" action="" class="registration-form" onsubmit="return false;">

                        <fieldset>
                            <div class="form-top">
                                <div class="form-top-left">
                                    <h3>Step 1 / 3</h3>

                                    <p>基本信息 (信息录入后将无法修改!)</p>
                                </div>
                                <div class="form-top-right">
                                    <i class="fa fa-user"></i>
                                </div>
                            </div>
                            <div class="form-bottom">
                                <div class="form-group">
                                    <label class="sr-only" for="studentId">学号</label>
                                    <input type="text" name="studentId" placeholder="学号..."
                                           class="form-first-name form-control" id="studentId"
                                           onkeyup="var reg=/^[\d]+$/;if(!reg.test(this.value)) this.value='';"
                                           maxlength="12">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="userName">姓名</label>
                                    <input type="text" name="userName" placeholder="真实姓名..."
                                           class="form-last-name form-control" id="userName"
                                           onkeyup="var reg=/^[\u4E00-\u9FA5]+$/;if(!reg.test(this.value)) this.value='';"
                                           maxlength="4">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="profession">专业</label>
                                    <input type="text" name="profession" placeholder="专业..."
                                           class="form-about-yourself form-control" id="profession"
                                           onkeyup="var reg=/^[\u4E00-\u9FA5]+$/;if(!reg.test(this.value)) this.value='';"
                                           maxlength="10">
                                </div>
                                <button type="button" class="btn btn-next">Next</button>
                            </div>
                        </fieldset>

                        <fieldset>
                            <div class="form-top">
                                <div class="form-top-left">
                                    <h3>Step 2 / 3</h3>

                                    <p>完善信息</p>
                                </div>
                                <div class="form-top-right">
                                    <i class="fa fa-key"></i>
                                </div>
                            </div>
                            <div class="form-bottom">
                                <div class="form-group">
                                    <label class="sr-only" for="grade">年级</label>
                                    <input type="text" name="grade" placeholder="入学年份(2012/2013/2014...)"
                                           class="form-email form-control" id="grade"
                                           onkeyup="var reg=/^[\d]+$/;if(!reg.test(this.value)) this.value='';"
                                           maxlength="4">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="_class">班级</label>
                                    <input type="text" name="_class" placeholder="班级(1/2/3/4/5...)"
                                           class="form-password form-control" id="_class"
                                           onkeyup="var reg=/^[\d]+$/;if(!reg.test(this.value)) this.value='';"
                                           maxlength="2">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="sex">性别</label>
                                    <input type="text" name="sex" placeholder="男/女..."
                                           class="form-repeat-password form-control" id="sex"
                                           onkeyup="var reg=/^[\u4E00-\u9FA5]+$/;if(!reg.test(this.value)) this.value='';"
                                           maxlength="1">
                                </div>
                                <button type="button" class="btn btn-previous">Previous</button>
                                <button type="button" class="btn btn-next">Next</button>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-top">
                                <div class="form-top-left">
                                    <h3>Step 3 / 3</h3>

                                    <p>账号注册</p>
                                </div>
                                <div class="form-top-right">
                                    <i class="fa fa-twitter"></i>
                                </div>
                            </div>
                            <div class="form-bottom">
                                <div class="form-group">
                                    <label class="sr-only" for="userId">账号</label>
                                    <input type="text" name="userId" placeholder="账号 (仅允许数字和英文组合)..."
                                           class="form-facebook form-control" id="userId"
                                           onkeyup="var reg=/^[\d\a-zA-Z]+$/;if(!reg.test(this.value)) this.value='';"
                                           maxlength="15">

                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="password">密码</label>
                                    <input type="password" name="password" placeholder="密码..."
                                           class="form-twitter form-control" id="password" maxlength="15"
                                           onmouseout="if(this.value.length<6) this.value='';">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="password-again">确认密码</label>
                                    <input type="password" name="password-again" placeholder="再次输入密码..."
                                           class="form-google-plus form-control" id="password-again" maxlength="15"
                                           onmouseout="var reg=$('#password').val();if((this.value)!=reg||this.value.length<6) this.value='';">
                                </div>
                                <button type="button" class="btn btn-previous">Previous</button>
                                <button type="submit" class="btn" id="sign">Sign me up!</button>
                            </div>
                        </fieldset>
                    </form>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 social-login">
                            <h3><strong style="color:#fff">if you have a account number :</strong></h3>
                            <div class="social-login-buttons">
                                <a class="btn btn-link-2" href="/fallwings/login.html">
                                    <i class="fa "></i> Login now !
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


<!-- Javascript -->
<script src="/fallwings/static/common/js/jquery-1.11.3.min.js"></script>
<script src="/fallwings/static/common/js/bootstrap.min.js"></script>
<script src="/fallwings/static/common/js/backstretch.min.js"></script>
<script src="/fallwings/static/register/js/retina-1.1.0.min.js"></script>
<script src="/fallwings/static/register/js/register.js"></script>
<!--<script src="/fallwings/static/register/js/scripts.js"></script>-->


</body>

</html>